import React from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import { Spin } from 'antd';
import word from '@/src/assets/comps/other/uploadC/word.png';
import excel from '@/src/assets/comps/other/uploadC/excel.png';
import pdf from '@/src/assets/comps/other/uploadC/pdf.png';
import zip from '@/src/assets/comps/other/uploadC/zip.png';
import image from '@/src/assets/comps/other/uploadC/image.png';
import video from '@/src/assets/comps/other/uploadC/video.png';
import unknown from '@/src/assets/comps/other/uploadC/unknown.png';
import { IconC } from '@/src/components';

class UploadList extends React.Component {
  // 判断文件类型
  getFileType = (file) => {
    const { name } = file;
    const flieArr = name?.split('.');
    if (!flieArr) return unknown;
    const suffix = flieArr[flieArr?.length - 1];

    // eslint-disable-next-line eqeqeq
    if (suffix != '') {
      // excel
      if (['xls', 'xlsx'].find((x) => x === suffix)) return excel;
      // word
      if (['doc', 'docx'].find((x) => x === suffix)) return word;
      // pdf
      if (['pdf'].find((x) => x === suffix)) return pdf;
      // 压缩包
      if (['rar', 'zip'].find((x) => x === suffix)) return zip;
      // 图片
      if (['jpg', 'jpeg', 'png'].find((x) => x === suffix)) return image;
      // 视频
      if (['mp4', 'webm', 'ogv'].find((x) => x === suffix)) return video;
    }
    return unknown;
  };

  render() {
    const { width, styleRow, fileList, isDowm, isDelete, onRemove, onDownload, fileListLoading } = this.props;

    const fileClassName = {
      error: 'upload-item-info-error',
    };

    return (
      <div className='ant-upload-list ant-upload-list-text' style={styleRow ? { width, ...styleRow } : { width }}>
        <div style={fileListLoading ? { padding: '30px 50px' } : {}}>
          <Spin spinning={fileListLoading}>
            {fileList?.map((file) => {
              return (
                <div className='ant-upload-list-item' key={file.uid}>
                  <div className='upload-item-info'>
                    {file.status === 'uploading' ? <LoadingOutlined className='upload-left-icon' /> : <img className='upload-left-icon' alt='' src={this.getFileType(file)} />}
                    <div className={`upload-item-info-name ${fileClassName[file.status]}`}>
                      {file.name}
                      {file.status === 'error' && '(上传失败)'}
                    </div>
                    {isDowm && file.status === 'done' && <IconC className='upload-right-icon' type='download' onClick={() => onDownload(file.value, file)} />}
                    {isDelete && <IconC className='upload-right-icon' type='delete' onClick={() => onRemove(file)} />}
                  </div>
                  <div className='progress-line'>
                    {file.status === 'uploading' && <div className='progress-line-bg' style={{ width: `${file.percent || 30}%` }} />}
                    {file.status === 'error' && <div className='progress-line-bg-error' style={{ width: '100%' }} />}
                  </div>
                </div>
              );
            })}
          </Spin>
        </div>
      </div>
    );
  }
}
export default UploadList;
